<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="./css/style.css">
    <script src="./js/jquery.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
    <a href="" name="home"></a>
    <div class="navwrap">

        <div class="nav ">
            <div class="row">

                <div class="logo">
                    <span class="logo1">DD</span>
                    <span class="logo2">LL</span>
                </div>
                <div class="nav-item">
                    <span><a href="#home" class="item-a">首页</a></span>
                    <span><a href="#hous" class="item-a">团队介绍</a></span>
                    <span><a href="#ours" class="item-a">关于我们</a></span>
                </div>
            </div>
        </div>
    </div>
    <div class="navwrapbg"></div>
    <div class="mainwrap">
        <div class="main">

            <div class="main-box">
                <span>HEllO.
				<small>welcome to our website</small>
			  </span>
                <img src="./img/箭头.png" alt="" class="imgicon">
            </div>

        </div>
    </div>
    <a href="" name="hous"></a>
    <div class="container-fluid">

        <div class="container">
            <div class="cont-title">
                <span>团队介绍</span><span style="font-size: 35px;">introduce</span>
            </div>
            <div class="cont-body">
                <div class="div1">
                    <h2>DELL</h2>
                    <h1>欢迎来到我们的网站</h1>
                    <p>这是亦我们的团队[DDLL]合作完成的</p>
                    <p>我们还只是一个不成熟的作业小组，这也只是一个不成熟的作业，但是在这里面融合了我们小组共同努力的心血。</p>
                    <p>我们一起练习着Al、PS，绘画，学习着html、CSS，不断锻炼着自己的专业技能。希望我们小组能一直继续努力下去。
                    </p>
                </div>
                <div class="div2 items">
                    <img src="./img/1 (2).jpg" alt="">
                </div>
                <div class="items">
                    <img src="./img/1 (8).jpg" alt="">
                </div>
                <div class="items">
                    <img src="./img/1 (7).jpg" alt="">
                </div>
                <div class="items">
                    <img src="./img/1 (5).jpg" alt="">
                    <div class="box">
                        <div class="box-one"></div>
                        <div class="box-two"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        $(function() {
            $(".items").click(function() {
                console.log($(this))
                var imgsrc = $(this).find("img").attr("src");
                console.log(imgsrc);
                var newList = $(`<div class="madel">
                               <div class="layout">
                                   <span class="close">
                                   X
                               </span>
                                   <div class="picshow">
                                       <img src="${imgsrc}" alt="">
                                   </div>
                                                  </div>
                                     </div>`);

                $("body").css({
                    overflow: "hidden",
                    marginRight: 17,
                });
                $("body").append(newList);
                newList.hide().fadeIn(300);
            });
            $("body").on("click", ".close", function() {
                $(".madel").fadeOut(300, function() {
                    $(this).remove();
                    $("body").css({
                        overflow: "auto",
                        marginRight: 0,
                    });
                });
            });
        });
    </script>
    <a href="" name="ours"></a>
    <div class="container-fluid">

        <div class="container">
            <div class="cont-title-left">
                <span>关于我们</span><span style="font-size: 35px;">Our team</span>
            </div>
            <div class="cont-body-two">
                <div class="body-item">
                    <a href="http://du-yaping.gitee.io/html" target="_blank " style="text-decoration: none;">
                        <div class="img">
                            <img src="./img/1 (1).png" alt="">
                        </div>
                        <div class="text">
                            <p style="color: black;">D [杜亚萍]</p>
                            <span>-Designer-</span>
                        </div>
                    </a>
                </div>
                <div class="body-item">
                    <a href="http://substitute-lemon.gitee.io/personal-website " target="_blank " style="text-decoration: none;">
                        <div class="img">
                            <img src="./img/1 (3).jpg" alt="">
                        </div>
                        <div class="text">
                            <p style="color: black;">D [代维]</p>
                            <span>-Programmer-</span>
                        </div>
                    </a>
                </div>
                <div class="body-item">
                    <a href="http://liu-yin12.gitee.io/personal-website/gallery.html " target="_blank " style="text-decoration: none;">
                        <div class="img">
                            <img src="./img/1 (4).jpg" alt="">
                        </div>
                        <div class="text">
                            <p style="color: black;">L [刘音]</p>
                            <span>-Designer-</span>
                        </div>
                    </a>
                </div>
                <div class="body-item">
                    <a href="http://lingyueyue.gitee.io/personal-website" target="_blank " style="text-decoration: none;">
                        <div class="img">
                            <img src="./img/1 (6).jpg" alt="" style="margin-top: -80px;">
                        </div>
                        <div class="text">
                            <p style="color: black;">L [李海燕]</p>
                            <span>-Programmer-</span>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="footer">
        <div class="container footer-cont">
            <div class="footer-item">
                <p style="font-size: 35px;"><span>DD</span><span style="   color: rgb(30, 233, 57);">LL</span></p>
                <p>DDLL all rights reserved.</p>
            </div>
            <div class="footer-item">
                <p><span>2065518583@qq.com ·Tel / 18784870042</span><span></span></p>
                <p>QQ/2065518583
                </p>
            </div>
        </div>
    </div>

    <script type="text/javascript" src="./js/index.js"></script>
    <script src="./js/st.js"></script>
    <script>
    </script>
</body>

</html>